<template>
    <div>
        <el-button type="primary" @click="show">添加影院</el-button>
        <div class="checkbox-plane" v-if="selectedCinemaList.length>0">
           <div class="header">
                <p>当前已添加影院：{{selectedCinemaList.length}}家</p>
           </div>
            <div class="content tag-plane" style="border: 0;margin-top: 10px;padding-top: 0;">
            <el-tag type="danger" @close="handleClose(index,cinema)" class="selected-item" v-for="(cinema,index) in selectedCinemaList" closable :key="index">{{cinema.cinemaName}}</el-tag>
            </div>
       </div>
        <el-dialog title="选择影城" :visible.sync="dialogVisible" width="600px" @close="resetFields('form')">
            <el-form inline :model="query" ref="form">
                <el-form-item >
                    <el-input v-model="query.cinemaName" placeholder="请输入影院名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="checkbox-plane">
                <div class="header">
                    <el-checkbox @change="doSelectAll">全选</el-checkbox>
                </div>
                <div class="content">
                    <div v-if="cinemaList == null">该公司暂无影城</div>
                    <div class="check-item">
                        <el-checkbox-group v-model="checkCinema">
                               <el-checkbox
                                   v-for="(cinema,index) in cinemaList"
                                   :label="cinema.cinemaId"
                                   :key="index">{{cinema.cinemaName}}</el-checkbox>
                              </el-checkbox-group>
                        <!--<el-checkbox v-model="cinema.checked">{{cinema.cinemaName}}</el-checkbox>-->
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save" >确 定</el-button>
            <el-button @click="hide" >取 消</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import { getHuoYinCinemaList } from '@/api/public'
import { split } from '@/utils'
// mergeArray
export default {
  props: {
    value: [String, Array],
    text: {
      type: Array,
      default: function () {
        return []
      }
    },
    department: String
  },
  data () {
    return {
      query: {},
      cinemaList: [],
      dialogVisible: false,
      selectedCinemaList: [],
      isInit: false,
      checkCinema: []
    }
  },
  watch: {
    value (val) {
      this.checkCinema = val
      if (val) {
        if (val.length === 0) {
          this.selectedCinemaList = []
        } else {
          this.init(val)
        }
      }
    }
  },
  methods: {
    init (value) {
      if (!this.isInit && this.text.length > 0) {
        if (typeof value === 'string') {
          value = split(value)
        }
        this.selectedCinemaList = value.map((e, i) => {
          return {
            cinemaName: this.text[i],
            cinemaId: e
          }
        })
        //      this.isInit = true
      }
    },
    show () {
      this.dialogVisible = true
      this.query = {}
      const query = { departmentId: this.department }
      this.fetchData(query)
    },
    hide () {
      this.dialogVisible = false
    },
    save () {
      if (!this.cinemaList) {
        this.$message.error('该公司无所属影院，请重新选择公司')
      } else if (this.checkCinema.length === 0) {
        this.$message.error('请选择影院')
      } else {
        var cinemaList = []
        for (var i = 0; i < this.checkCinema.length; i++) {
          for (var j = 0; j < this.cinemaList.length; j++) {
            if (this.checkCinema[i] === this.cinemaList[j].cinemaId) {
              var cinema = this.cinemaList[j]
              cinemaList.push(cinema)
            }
          }
        }
        this.selectedCinemaList = cinemaList
        this.dialogVisible = false
        const result = this.selectedCinemaList.map(e => {
          if (e.id) {
            return e.id
          } else if (e.cinemaId) {
            return e.cinemaId
          }
        })
        const resultName = this.selectedCinemaList.map(e => e.cinemaName)
        this.$emit('input', result, resultName)
      }
      //    this.selectedCinemaList = mergeArray(this.selectedCinemaList, this.cinemaList.filter(e => e.checked))
    },
    handleClose (index) {
      this.selectedCinemaList.splice(index, 1)
      this.checkCinema.splice(index, 1)
      const result = this.selectedCinemaList.map(e => {
        if (e.id) {
          return e.id
        } else if (e.cinemaId) {
          return e.cinemaId
        }
      })
      const resultName = this.selectedCinemaList.map(e => e.cinemaName)
      this.$emit('input', result, resultName)
    },
    doSelectAll (val) {
      this.cinemaList.forEach(e => {
        this.$set(e, 'checked', val)
      })
    },
    async fetchData (query) {
      this.cinemaList = await getHuoYinCinemaList(query)
    },
    queryData () {
      const query = Object.assign({}, this.query)
      query.departmentId = this.department
      this.fetchData(query)
    }
  },
  async created () {
    this.init()
  }
}
</script>

<style scoped lang="scss">
    .checkbox-plane {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 20px;
    }

    .header {
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #F2F6FC;
        padding: 0 20px;
        border-bottom: 1px solid #DCDFE6;
    }

    .content {
        padding: 20px;
        margin: -10px 0px;
        margin-top: 0;
        max-height: 300px;
        overflow: auto;
        .check-item {
            margin: 10px 0px;
            .el-checkbox{
                width: 100%;
                margin-left: 0;
            }
        }
    }

    .tag-plane {
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        .selected-item {
            margin: 10px;
            height: 40px;
            line-height: 40px;
            /*width: 30%;*/
            border:2px solid #3ca0ec;
            background-color: #fff;
            color: #999999;
            font-size: 14px;
            text-align: center;
        }
    }
        .el-icon-close{
            border-color: #3ca0ec #fff!important;
             border-width: 0 0 39px 52px !important;
            border-style: solid !important;
             width: 0;
               height: 0;
              border-radius: 0;
          }

</style>
